<template>
    <div>
        <div class="title">轮播图创建:</div>
        <el-form @submit.native.prevent = "save" label-width="100px">
            <el-form-item class="d-f d-f-ai" style="margin:15px 100px;" >
                <el-button type="primary" @click="addin">确认提交</el-button>
            </el-form-item>
            <el-form-item>
                <el-button style="margin:15px 100px;" @click="priceByPowerConfig.push({})" type="primary" v-if="!(priceByPowerConfig.length >= 6)">添加</el-button>
                <el-row>
                    <el-col :span="8" v-for="(items,i) in priceByPowerConfig" :key="i">
                        <el-form-item label="跳转链接:" style="margin-bottom:5px">
                            <el-select v-model="items.url" placeholder="请选择跳转链接">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="图片">
                            <el-upload
                                :headers="token"
                                class="avatar-uploader"
                                :action="url+'/upload'"
                                :show-file-list="false"
                                :on-success="(e)=>$set(items,'path',e.data.path)"
                            >
                                <img v-if="items.path" :src="items.path" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item style="margin:15px 100px;" class="d-f d-f-ai">
                            <el-button type="danger" @click="priceByPowerConfig.splice(i,1)">删除</el-button>
                        </el-form-item>
                    </el-col>
                    
                </el-row>
            </el-form-item>
            
        </el-form>
        <div class="upload">
            
        </div>
    </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator"
import { mixins } from 'vue-class-component'
import upload from "@/utils/upload"
@Component({

})
export default class extends mixins(upload){
    public token = {
        token:''
    }
    public imageUrl = ''
    public priceByPowerConfig = [
            {
                url:'',
                path:''
            }
    ]
        
    private handleAvatarSuccess(e: any){
        console.log(e)
    }

    private addin(){ //上传图片
        const model = {
            banner:this.priceByPowerConfig
        }
        this.$message.success('上传成功')
    }
}
</script>

<style lang="scss" scoped>
    .title{
        margin-top: 30px;
        margin-left: 120px;
    }
    .d-f{
        display: flex;
    }
    .d-f-ai{
        align-items: center;
    }
    .avatar-uploader{
        display: block;
        width: 178px;
        height: 178px;
        border-radius: 10px;
        border:1px dashed #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .title{
        font-size: 15px;
        font-weight: bold;
    }
</style>